<template>
  <div>
    <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
      title="新的朋友"
    />
    <div class="newFriendsList">
      <div
        class="newFriendsListItem"
        v-for="(item, index) in addressBook.addFriendList"
        :key="index"
      >
        <div>{{ item.fromName }}请求添加你为好友</div>
        <div v-if="Number(item.status) === 0">
          <van-button
            type="primary"
            @click="goAgree(item.fromId, index)"
            size="small"
            >同意</van-button
          >
          <van-button size="small" @click="goRefuse(index)">拒绝</van-button>
        </div>
        <div v-else-if="Number(item.status) === 1">已同意</div>
        <div v-else>已拒绝</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import addressBookStore from "@/store/module/addressBook";
import { agreeFriend } from "@/api/user";

let addressBook = addressBookStore();
const router = useRouter();
const goAgree = (friendId: string, index: number) => {
  agreeFriend({
    friendId: friendId,
  }).then((res) => {
    console.log(res);
    if (res.code === 200) {
      addressBook.updateItemStatus(index, 1);
      addressBook.reduceUnReadCount();
    }
  });
};
const goRefuse = (index: number) => {
  addressBook.updateItemStatus(index, 2);
};
function onClickLeft() {
  router.go(-1);
}
</script>

<style lang="scss" scoped>
.newFriendsListItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  font-size: 14px;

  // color:#cdcdcd;
  & > div:nth-child(2) {
    .van-button {
      margin: 0 5px;
    }
  }
}
</style>